<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style>
	/*每个页面公共css */
	html, body { margin: 0; padding: 0; }
	
	/* 全局安全区域适配 */
	.safe-area-bottom {
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
	
	.safe-area-top {
		padding-top: constant(safe-area-inset-top);
		padding-top: env(safe-area-inset-top);
	}
	
	.safe-area-left {
		padding-left: constant(safe-area-inset-left);
		padding-left: env(safe-area-inset-left);
	}
	
	.safe-area-right {
		padding-right: constant(safe-area-inset-right);
		padding-right: env(safe-area-inset-right);
	}
	/* PC端(H5)宽屏时，居中并限制最大宽度，呈现移动端视觉 */
	@media (min-width: 768px) {
		html, body {
			background: #f5f6f7;
			/* 将窗口滚动隐藏，把滚动交给居中容器，实现滚动条在容器内侧 */
			overflow: hidden;
		}

		/* uni-app 的根容器，限制宽度并居中 */
		#app, .uni-app, .uni-page-body {
			max-width: 420px; /* 可按需求调整 375~480 之间 */
			margin: 0 auto !important;
			background: #ffffff;
			min-height: 100vh;
			/* 在PC端由容器自身滚动 */
			overflow-y: auto;
			/* 不再预留滚动条空间，避免右侧空白 */
			scrollbar-gutter: unset;
		}

		/* 防止内部元素突破容器宽度 */
		*, *::before, *::after {
			box-sizing: border-box;
		}
		img, video, canvas {
			max-width: 100%;
			height: auto;
			display: block;
		}
	}

	/* PC端(H5)滚动条美化，仅宽屏时启用 */
	@media (min-width: 768px) {
		/* 固定宽度为 2px（接近 2rpx），轨道与滑块透明 */
		#app::-webkit-scrollbar, .uni-app::-webkit-scrollbar, .uni-page-body::-webkit-scrollbar { width: 2px; height: 2px; }
		#app::-webkit-scrollbar-track, .uni-app::-webkit-scrollbar-track, .uni-page-body::-webkit-scrollbar-track { background: transparent; border-radius: 8px; }
		#app::-webkit-scrollbar-thumb, .uni-app::-webkit-scrollbar-thumb, .uni-page-body::-webkit-scrollbar-thumb { background: rgba(0,0,0,0); border-radius: 8px; }

		/* Firefox：固定为 thin，颜色透明，避免状态切换带来的抖动 */
		#app, .uni-app, .uni-page-body { scrollbar-width: none; scrollbar-color: transparent transparent; }
	}
</style>
